<template>
    <div class="payment">
        <el-form ref="form" :model="form" label-width="100px">
            <el-form-item label="选择通道:">
                <p>
                    <el-button @click="change(1)" :class="{size:flag==1}">通道1</el-button>
                    <el-button @click="change(2)" :class="{size:flag==2}">通道2</el-button>
                    <el-button @click="change(3)" :class="{size:flag==3}">通道3</el-button>
                </p>
            </el-form-item>
            <el-form-item label="充值数额：">
                <el-input style="width:400px;" type="number" v-model="form.name">
                    <template slot="append">单位：USDT(个)</template>
                </el-input>
            </el-form-item>
            <!-- <el-form-item label="付款方式">
                <ul class="imgList">
                    <li v-for="(item ,index) in imgUrl" :key="index">
                        <img
                            :src="item.src"
                            alt
                            @click="selected(item.code)"
                            :class="{active : active == item.code}"
                        />
                    </li>
                </ul>
            </el-form-item>-->
            <el-form-item label>
                <el-button @click="PaymentCenter" type="primary">立即充值</el-button>
            </el-form-item>
        </el-form>
    </div>
</template>
<script>
// import { toPaymentCenter, paySign, roadTwo, roadThree } from "../../api/api";
import qs from "qs";
export default {
    data() {
        return {
            imgUrl: [
                // {src: require("../../assets/images/img1.jpg"),code:104},
                // {src: require("../../assets/images/img2.jpg"),code:103},
                // { src: require("../../assets/images/img3.jpg"), code: 102 }
            ],
            options: [
                {
                    value: "USDT",
                    label: "USDT(泰达币)"
                }
            ],
            value: "USDT",
            flag: 1,
            form: {
                name: ""
            },
            active: 102,
            val: 0,
            url: ""
        };
    },
    methods: {
        change(val) {
            this.flag = val;
        },
        selected(name) {
            this.active = name;
            console.log(name);
        },
        PaymentCenter() {
            var getUrls = window.location.href
            if(getUrls.substring(0,5).indexOf('s')==-1){
                var getUrlss = getUrls.replace(getUrls.substring(0,4),'https')
            }else{
                var getUrlss = getUrls
            }
            console.log(getUrlss)
            if (this.flag == 1) {
                //   console.log(this.value);
                //   if (!(/^\d+[\d\.]*$/.test(this.form.name))) {
                // 	          this.$message.error("请输入正确数值");
                // 	        	return false
                //         }
                if(this.form.name<700){
                    this.$message.error("最小金额700");
                    return false;
                }
                try {
                    this.form.name * 1;
                } catch (error) {
                    this.$message.error("请输入正确数值");
                    return false;
                }
                if (this.value !== "USDT" && this.value !== "CNY") {
                    this.$message.error("请选择付款方式");
                    return false;
                } else if (this.form.name == "") {
                    this.$message.error("请输入金额");
                    return false;
                } else {
                    let { amountType, amount, payType } = this.$route.query;
                    let userId = JSON.parse(
                        window.sessionStorage.getItem("user")
                    );
                    let merchantId = userId.id;
                    let data = qs.stringify({
                        amountType: this.value,
                        amount: this.form.name,
                        payType: this.active,
                        passageway: this.flag,
                        token: userId.token,
                        returnUrl: getUrlss,
                        channel: "1"
                    });
                    paySign(data).then(res => {
                        if (res.data.code == 200) {
                            console.log(res.data.data, 99999999);
                            let tempForm = document.createElement("form");
                            tempForm.action = toPaymentCenter;
                            tempForm.method = "post";
                            tempForm.target = "_blank";
                            tempForm.style.display = "none";
                            for (var p in res.data.data) {
                                var opt = document.createElement("textarea");
                                opt.name = p;
                                opt.value = res.data.data[p];
                                tempForm.appendChild(opt);
                            }
                            document.body.appendChild(tempForm);
                            tempForm.submit();
                        } else {
                            this.$message.error(res.data.msg);
                        }
                    });
                }
            }
            if (this.flag == 2) {
                
                if (this.form.name == "") {
                    this.$message.error("请输入正确数值");
                    return false;
                }
                if(this.form.name<700){
                    this.$message.error("最小金额700");
                    return false;
                }
                var user = JSON.parse(sessionStorage.getItem("user"));
                var params = {
                    token: user.token,
                    amount: this.form.name,
                    returnUrl: getUrlss
                };
                roadTwo(qs.stringify(params)).then(res => {
                    if (res.data.code == 200) {
                        console.log(res.data)
                        window.location.href = res.data.data
                    }else {
                            this.$message.error(res.data.msg);
                        }
                });
            }
            if (this.flag == 3) {
                if (this.form.name == "") {
                    this.$message.error("请输入正确数值");
                    return false;
                }
                if(this.form.name<700){
                    this.$message.error("最小金额700");
                    return false;
                }
                var user = JSON.parse(sessionStorage.getItem("user"));
                var params = {
                    token: user.token,
                    amount: this.form.name,
                    returnUrl: getUrlss
                };
                roadThree(qs.stringify(params)).then(res => {
                    if (res.data.code == 200) {
                        var tempForm3 = document.createElement("form");
                        tempForm3.id = "form3";
                        tempForm3.name = "form3";
                        tempForm3.action = "https://zf.flyotcpay.com/payment/";
                        tempForm3.method = "post";
                        tempForm3.target = "_blank";
                        tempForm3.style.display = "none";
                        $.each(res.data.data, function(key, value) {
                            var opt = document.createElement("input");
                            opt.name = key;
                            opt.value = value;
                            tempForm3.appendChild(opt);
                        });
                        document.body.appendChild(tempForm3);
                        tempForm3.submit();
                    }else {
                            this.$message.error(res.data.msg);
                        }
                });
            }
        }
    }
};
</script>
<style lang="scss" scoped>
.payment {
    padding: 50px 5%;
    box-sizing: border-box;
}
.size {
    background: #409eff;
    color: #f2f2f2;
}
.imgList {
    width: 500px;
    li {
        width: 20%;
        margin: 10px;
        display: inline-block;
        img {
            width: 100%;
            border: 2px solid #f2f2f2;
        }
        .active {
            border: 3px solid #fd7522;
        }
    }
}
</style>
